<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/common.css"/>
    <link rel="stylesheet" href="css/main.css"/>
    <link rel="stylesheet" href="css/jquery-ui-timepicker-addon.css"/>
    <link rel="stylesheet" href="css/jquery-ui.css"/>
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css" />
    <link href="css/city-picker.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="css/jquery-impromptu.min.css" type="text/css"/>
    <link rel="stylesheet" href="css/iconfont.css" type="text/css"/>
    <link rel="stylesheet" href="css/combo.select.css" type="text/css"/>
</head>
<body>
    <div id="dataLoad" style="display:none; position: fixed; width: 100%; top: 20%; z-index: 1001;">
       <table width=100% height=100% border=0 align=center valign=middle>
        <tr height=50%><td align=center>&nbsp;</td></tr>
        <tr><td align=center><img src="images/loading.gif"/></td></tr>
        <tr><td align=center id="load_msg">处理中，请稍后......</td></tr>
        <tr height=50%><td align=center>&nbsp;</td></tr>
       </table>
     </div>
    <div class="container">
        <div id="table" class="mt10">
            <div class="box_top">
                <b class="pl15">报销项目信息</b>
            </div>
            <div class="box span10 oh">
                <table width="60%" border="0" cellpadding="0" cellspacing="0" class="list_table" id="info_fee_table">
                    <tr>
                        <th class="td_center" style="width:3%">序号</th>
                        <th class="td_center" style="width:10%">报销项目名称</th>
                        <th class="td_center" style="width:10%">报销项目类型</th>
                        <th class="td_center" style="width:10%">经费承担</th>
                        <th class="td_center" style="width:10%">可选操作</th>
                    </tr>
                </table>
            </div>
            <div class="page mt10 fl">
                <a class="ext_btn add mt10" onclick="addFinanceItem()" ><span class="add" ></span>添加报销项目</a>
            </div>
        </div>
    </div>
    <div id="add_item_dlg" class="mt10" style="display:none" title="添加业务报销项目">
        <div class="box">
            <div class="box_center">
                <table class="form_table pb15" width="100%" border="0" cellpadding="0" cellspacing="0">
                    <tr>
                        <td class="td_left">报销项目名称：</td>
                        <td class="">
                            <input type="text" placeholder="请输入报销项目" class="input-text lh25" size="20" id="add_item_name">
                        </td>
                    </tr>
                    <tr>
                        <td class="td_left">报销项目类型：</td>
                        <td class="">
                            <span class="fl">
                                  <div class="select_border">
                                      <div class="select_containers ">
                                          <select name="" class="select" id="item_type" >
                                              <option value="0">行政业务经费</option>
                                              <option value="1">加班误餐费</option>
                                              <option value="2">其它经费</option>
                                          </select>
                                      </div>
                                  </div>
                                </span>
                        </td>
                        <td class="td_left">
                            部门包干经费：
                        </td>
                        <td>
                            <td class="">
                                <input type="radio" name="isSection" value="1" checked> 是
                                <input type="radio" name="isSection" value="0" > 否
                            </td>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</body>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
<script type="text/javascript" src="js/common.js"></script>
<script type="text/javascript" src="js/city-picker.data.js"></script>
<script type="text/javascript" src="js/city-picker.js"></script>
<script type="text/javascript" src="js/config.js"></script>
<script src="js/jquery-impromptu.min.js" type="text/javascript"></script>
<script>
    //辅助变量，所有报销项目
    var curFinanceItem = [];

    //辅助函数，判断当前条目是否添加
    function isFinanceItemAdded(itemName){
        for(var i = 0; i < curFinanceItem.length; i++){
            if(curFinanceItem.name === itemName){
                return true;
            }
        }
        return false;
    }

    //辅助函数，处理修改按钮
    function processModifyBtn(){
        $('.modify_btn').each(function(){
            $(this).click(function (e) {
                e.preventDefault();
                var id = parseInt($(this).parent().parent().find('td').eq(0).text());
                $('#add_item_name').val(curFinanceItem[id-1].name);
                $('#item_type').val(curFinanceItem[id-1].type);
                $(":radio[name='isSection'][value='" + curFinanceItem[id-1].is_section +"']").prop("checked", "checked");
                modifyItem(id);
            })
        })
    }

    //辅助函数，处理删除按钮
    function processDelBtn(){
        $('.del_btn').each(function(){

            $(this).click(function(e){

                e.preventDefault();
                var id = parseInt($(this).parent().parent().find('td').eq(0).text());
                $('#dataLoad').show();
                $.post(url + 'FinanceManage/DelFinanceItem.php', {'item_id':curFinanceItem[id-1].id}, function(data){
                    $('#dataLoad').hide();
                    var t = JSON.parse(data);
                    if(t.state == 1){
                        $.prompt("<h3>删除成功</h3>", {
                            title: '操作提醒',
                            buttons: {'确定': true}
                        });
                        getFinanceItem();
                    }
                    else{
                        $.prompt("<h3>网络繁忙，请稍后再试</h3>", {
                            title: '错误提醒',
                            buttons: {'确定': true}
                        })
                    }
                })
            })
        })
    }

    //辅助函数，初始化报销条目表
    function initFinanceItemTable(){
        $('.info_tr').empty();
        for(var i = 0; i < curFinanceItem.length; i++){
            $('#info_fee_table').append(
                "<tr class='info_tr'>" +
                    "<td class='td_center'>" + (i+1) + "</td>" +
                    "<td class='td_center'>" + curFinanceItem[i].name + "</td>" +
                    "<td class='td_center'>" + getFinanceFeeItemTypeName(curFinanceItem[i].type) +"</td>" +
                    "<td class='td_center'>" + (curFinanceItem[i].is_section == 1 ? '部门承担' : '分局承担') +"</td>" +
                    "<td class='td_center'>" +
                        "<a class='ext_btn  del_btn'><span class='del'></span>删除</a>"+
                        "<a class='ext_btn  modify_btn'><span class='modify'></span>修改</a>"+
                   "</td>"+
                "</tr>");
        }

        processDelBtn();
        processModifyBtn();

    }

    //辅助函数，获取所有项目
    function getFinanceItem(){
        $('#dataLoad').show();
        $.get(url + 'Common/GetFeeItem.php', function(data){
            $('#dataLoad').hide();
            var t = JSON.parse(data);
            if(t.state == 1){
                curFinanceItem = t.data;
                initFinanceItemTable();
            }
            else{
                $.prompt("<h3>网络繁忙，请稍后再试</h3>", {
                    title: '错误提醒',
                    buttons: {'确定': true}
                })
            }
        })
    }

    //辅助函数，处理修改数据
    function modifyFinanceItem(id){
        var item_name = $('#add_item_name').val();
        var item_type = $('#item_type').val();
        var item_id = curFinanceItem[id-1].id;
        var is_section = $("input[name='isSection']:checked").val();
        $('#dataLoad').show();
        $.post(url + 'FinanceManage/ModifyFinanceItem.php', {'item_name':item_name, 'item_type':item_type, 'item_id':item_id, 'is_section' : is_section}, function(data){
            $('#dataLoad').hide();
            var t = JSON.parse(data);
            if(t.state == 1){
                $.prompt("<h3>修改成功</h3>", {
                    title: '操作提醒',
                    buttons: {'确定': true}
                });
                getFinanceItem();
            }
            else{
                $.prompt("<h3>数据库错误或网络繁忙，请稍后再试</h3>", {
                    title: '错误提醒',
                    buttons: {'确定': true}
                })
            }
        })
    }

    //辅助函数，处理上传数据——添加数据
    function uploadFinanceItem(){
        var item_name = $('#add_item_name').val();
        var item_type = $('#item_type').val();
        var is_section = $("input[name='isSection']:checked").val();
        $('#dataLoad').show();
        $.post(url + 'FinanceManage/AddFinanceItem.php', {'item':item_name, 'item_type':item_type, 'is_section':is_section}, function(data){
            $('#dataLoad').hide();
            var t = JSON.parse(data);
            if(t.state == 1){
                $.prompt("<h3>添加成功</h3>", {
                    title: '操作提醒',
                    buttons: {'确定': true}
                });
                getFinanceItem();
            }
            else{
                $.prompt("<h3>数据库错误或网络繁忙，请稍后再试</h3>", {
                    title: '错误提醒',
                    buttons: {'确定': true}
                })
            }
        })
    }

    //辅助函数，修改项目
    function modifyItem(id){
        $('#add_item_dlg').dialog({
            resizable: false,
            height: "auto",
            width: "auto",
            title: '修改项目',
            modal: true,
            buttons: {
                '确定' :function(){
                    var item_name = $('#add_item_name').val();
                    if(item_name.length == 0 || isFinanceItemAdded(item_name)){
                        $.prompt("<h3>数据填写错误或已添加过本报销条目，请核对</h3>", {
                            title: '错误提醒',
                            buttons: {'确定': true}
                        })
                    }
                    else{
                        modifyFinanceItem(id);
                    }
                },
                '取消' : function(){
                    $(this).dialog('close');
                }
            }
        })
    }

    //辅助函数，添加项目
    function addFinanceItem(){
        $('#add_item_name').val('');
        $('#add_item_dlg').dialog({
            resizable: false,
            height: "auto",
            width: "auto",
            modal: true,
            buttons: {
                '确定' :function(){
                    var item_name = $('#add_item_name').val();
                    if(item_name.length == 0 || isFinanceItemAdded(item_name)){
                        $.prompt("<h3>数据填写错误或已添加过本报销条目，请核对</h3>", {
                            title: '错误提醒',
                            buttons: {'确定': true}
                        })
                    }
                    else{
                        uploadFinanceItem();
                    }
                },
                '取消' : function(){
                    $(this).dialog('close');
                }
            }
        })
    }
    $(function(){
        getFinanceItem();

    })
</script>



</html>